<template>
	<common-layout>
		<div class="top">
			<div class="header">
				<img alt="logo" class="logo" src="@/assets/img/logo.png" />
				<span class="title">{{systemName}}</span>
			</div>
			<div class="desc">开源项目管理后台</div>
			<!-- <div class="desc">After all, tomorrow is another day!</div> -->
		</div>
		<div class="login">
			<a-form @submit="onSubmit" :form="form">
				<a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
					<a-tab-pane tab="账户密码登录" key="1">
						<a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
						<a-form-item>
							<a-input autocomplete="autocomplete" size="large" placeholder="请输入登陆账号" v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]">
								<a-icon slot="prefix" type="user" />
							</a-input>
						</a-form-item>
						<a-form-item>
							<a-input size="large" placeholder="请输入密码" autocomplete="autocomplete" type="password" v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]">
								<a-icon slot="prefix" type="lock" />
							</a-input>
						</a-form-item>
					</a-tab-pane>
					<a-tab-pane tab="手机号登录" key="2">
						<a-form-item>
							<a-input size="large" placeholder="mobile number">
								<a-icon slot="prefix" type="mobile" />
							</a-input>
						</a-form-item>
						<a-form-item>
							<a-row :gutter="8" style="margin: 0 -4px">
								<a-col :span="16">
									<a-input size="large" placeholder="captcha">
										<a-icon slot="prefix" type="mail" />
									</a-input>
								</a-col>
								<a-col :span="8" style="padding-left: 4px">
									<a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
								</a-col>
							</a-row>
						</a-form-item>
					</a-tab-pane>
				</a-tabs>
				<div>
					<a-checkbox :checked="true">自动登录</a-checkbox>
					<a style="float: right">忘记密码</a>
				</div>
				<Vcode :canvasWidth="330" :sliderSize="40" :puzzleScale="0.9" :show="isShow" @success="success" @close="close" />
				<a-form-item>
					<a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
				</a-form-item>
				<div>
					<router-link style="float: left" to="/dashboard/workplace" >注册账户</router-link>
					<router-link style="float: right" to="/dashboard/workplace" >忘记密码</router-link>
				</div>
			</a-form>
		</div>
	</common-layout>
</template>

<script>
	import CommonLayout from '@/layouts/CommonLayout'
	import Vcode from "vue-puzzle-vcode"; //人机验证
	import {login, getRoutesConfig} from '@/services/user'
	import {
		setAuthorization
	} from '@/utils/request'
	import {
		loadRoutes
	} from '@/utils/routerUtil'
	import {
		mapMutations
	} from 'vuex'
	

	export default {
		name: 'Login',
		components: {
			CommonLayout,
			Vcode,
		},
		data() {
			return {
				logging: false,
				error: '',
				form: this.$form.createForm(this),
				isShow: false,
			}
		},
		computed: {
			systemName() {
				return this.$store.state.setting.systemName
			}
		},
		methods: {
			...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
			// 用户通过了验证
			success() {
				this.isShow = false; // 通过验证后，需要手动隐藏模态框
				const name = this.form.getFieldValue('name')
				const password = this.form.getFieldValue('password')
				login(name, password).then(res => this.afterLogin(res))
			},
			// 用户点击遮罩层，应该关闭模态框
			close() {
				this.logging = false;
				this.isShow = false;
			},
			onSubmit(e) {
				e.preventDefault()
				this.form.validateFields((err) => {
					if (!err) {
						console.log('此处人机验证');
						this.logging = true;
						this.isShow = true;
					}
				})
			},
			afterLogin(res) {
				const loginRes = res.data;
				this.logging = false;
				if (res.data.code == 200) {
					console.log('登录成功')
					console.log(res);
					setAuthorization({
						token: res.data.data.token,
						expireAt: Date.now()
					})
					this.$router.push('/dashboard/workplace')
					this.$message.success('凯文童鞋，欢迎回来')
				} else {
					console.log('登录失败')
					this.$message.error('登录失败')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.common-layout {
		.top {
			text-align: center;

			.header {
				height: 44px;
				line-height: 44px;

				a {
					text-decoration: none;
				}

				.logo {
					height: 44px;
					vertical-align: top;
					margin-right: 16px;
				}

				.title {
					font-size: 33px;
					color: @title-color;
					font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
					font-weight: 600;
					position: relative;
					top: 2px;
				}
			}

			.desc {
				font-size: 14px;
				color: @text-color-second;
				margin-top: 20px;
				margin-bottom: 30px;
			}
		}

		.login {
			width: 368px;
			margin: 0 auto;

			@media screen and (max-width: 576px) {
				width: 95%;
			}

			@media screen and (max-width: 320px) {
				.captcha-button {
					font-size: 14px;
				}
			}

			.icon {
				font-size: 24px;
				color: @text-color-second;
				margin-left: 16px;
				vertical-align: middle;
				cursor: pointer;
				transition: color 0.3s;

				&:hover {
					color: @primary-color;
				}
			}
		}
	}
</style>
